<template>
  <div id="map">
    <header>
      <img :src="getImageUrl('/assets/image/map_header.png')" alt="" />
    </header>
    <main>
      <header class="navigator">
        <img :src="getImageUrl('/assets/image/home.png')" alt="" @click="routerPush('/')" style="cursor: pointer;"/>
        <p class="date">03/04 12:00 - 03/04 23:59</p>
      </header>
      <article class="content">
        <section class="left">
          <div class="top">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="middle">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="bottom"></div>
        </section>
        <section class="map">
          <div id="map-container"></div>
        </section>
        <section class="right">
          <div class="top">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="middle"></div>
          <div class="bottom"></div>
        </section>
      </article>
    </main>
  </div>
</template>
<script setup>
import { getImageUrl } from "@/utils/utils.js";
import coordtransform from "coordtransform";
import {　routerPush　} from "@/plugins/index.js";
const allData = inject("allData");
let longitude = ref("10359.8132,E");
let latitude = ref("0117.9007,N,");
let instanceMap = ref(null);
let instanceMarker = ref(null);
onMounted(() => {
  initMap();
  setMapPostion()
});

watch(
  () => allData?.value?.geo,
  (newVal, oldVal) => {
    longitude.value = newVal ? newVal?.geo?.["z1315"] : "10359.8132,E";
    latitude.value = newVal ? newVal?.geo?.["z1309"] : "0117.9007,N,";
    setMapPostion();
  },
  {
    deep: true
  }
);
const setMapPostion = () => {
  let slongitude = stringToWGS84(longitude.value);
  let slatitude = stringToWGS84(latitude.value);
  let res = coordtransform.wgs84togcj02(slongitude, slatitude);
  const apiKey = "96d4e37fa142952fcd20c7f1720875c2";
  // 发起坐标转换请求
  fetch(
    `https://restapi.amap.com/v3/assistant/coordinate/convert?locations=${res[0]},${res[1]}&coordsys=gps&output=json&key=${apiKey}`
  )
    .then((response) => response.json())
    .then((data) => {
      if (data.status === "1" && data.info === "ok") {
        // 高德坐标（GCJ-02）
        if (instanceMarker.value) {
          instanceMap.value.remove(instanceMarker.value);
        }
        const amapCoordinates = data.locations.split(",");
        instanceMap.value.setCenter(amapCoordinates);
        instanceMarker.value = new AMap.Marker({
          position: amapCoordinates,
          title: "0117.9007,N,10359.8132,E",
        });
        instanceMap.value.add(instanceMarker.value);
        // 初始化地图
      } else {
        console.error("坐标转换失败", data);
      }
    })
    .catch((error) => {
      console.error("发生错误", error);
    });
};
const initMap = () => {
  let styleName = "amap://styles/blue";
  let satelliteLayer = new AMap.TileLayer.Satellite();
  instanceMap.value = new AMap.Map("map-container", {
    zoom: 7,
  });
  instanceMap.value.add(satelliteLayer);
  instanceMap.value.setMapStyle(styleName);
};
let stringToWGS84 = function (degreeMinuteString) {
  const commaIndex = degreeMinuteString.indexOf(",");
  let l = 0;
  if (commaIndex !== -1) {
    const degreeMinute = degreeMinuteString
      .substring(0, commaIndex)
      .replace(".", ""); // 度分部分
    const direction = degreeMinuteString
      .substring(commaIndex + 1)
      .replace(",", ""); // 方向部分
    if (direction == "N" || direction == "S") {
      l = +(degreeMinute.substring(0, 2) + "." + degreeMinute.substring(2));
    } else {
      l = +(degreeMinute.substring(0, 3) + "." + degreeMinute.substring(3));
    }
    if (direction == "S" || direction == "W") {
      l = -l;
    }
    return l;
  } else {
    throw new Error("Invalid degree-minute string format.");
  }
};
</script>
<style scoped lang="scss">
#map-container {
  height: 100%;
}
#map {
  display: flex;
  flex-direction: column;
  height: 100%;
  header {
    background-color: #000a73;
    img {
      width: 100%;
      background-repeat: no-repeat;
    }
  }
  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000a73;
    .navigator {
      width: 97%;
      position: relative;
      display: flex;
      align-items: center;
      color: #777777;
      img {
        width: 35px;
        height: 35px;
        background-repeat: no-repeat;
        vertical-align: middle;
      }
      .date {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    article.content {
      width: 97%;
      flex: 1;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      box-sizing: border-box;
      .left {
        display: flex;
        flex-direction: column;
        .top {
          display: flex;
          justify-content: space-between;
          & > div {
            width: 32.5%;
            height: 70px;
            background: #000;
            // background-image: url("/dist/assets/images/");
          }
        }
        .middle {
          margin: 15px 0;
          display: flex;
          justify-content: space-between;
          & > div {
            width: 32.5%;
            height: 90px;
            background: #000;
          }
        }
        .bottom {
          flex: 1;
          background-color: rgb(26, 1, 1);
        }
      }
      .map {
        // background: #000;
        border-image: url("@/assets/image/box-border.png");
      }
      .right {
        display: flex;
        flex-direction: column;
        .top {
          display: flex;
          justify-content: space-between;
          & > div {
            width: 31.5%;
            height: 120px;
            background: #000;
          }
        }
        .middle {
          margin: 20px 0;
        }
        .middle,
        .bottom {
          flex: 1;
          background: red;
        }
      }
      section {
        border: 1px solid #000;
        width: 32.5%;
        height: 100%;
        // background: #000;
      }
    }
  }
}
</style>
